<template>
  <div>
    <form action="/">
      <van-search v-model="value" @input="searchEvent(value)" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
    </form>
    <!--搜索框下面的收缩记录 -->
    <div class="center" v-show="isShow">
      <div class="history">
        <div class="left">历史记录</div>
        <van-icon name="delete-o" @click="remove" />
      </div>
      <div class="show">
        <div v-for="(item, index) in historyValue" :key="index">
          <!-- this.isShow=!this.isShow -->
          <a>{{item}}</a>
          <!--  <a>乳胶复合床褥</a>
        <a>拖鞋</a>
        <a>毛巾</a>
        <a>蓝牙耳机</a>
        <a>猫粮</a>
        <a>袜子</a> -->
        </div>
      </div>
    </div>
    <div class="hot">
      <span>热门搜索</span>
    </div>
    <!-- 多个标签 -->
    <div class="tag" >
     <div v-for="(item,index) in keyValue" :key="index"><a>{{item.keyword}}</a></div>
    </div>
  </div>
</template>

<script>
import { nextTick, watch} from 'vue'
import {mapState} from 'vuex'
import { Toast } from 'vant'
export default {
  data() {
    return {
      value: '',
      isShow: false,
      historyValue: []
    }
  },
  // mounted:{
  //   this.$store.dispatch('hotKey/searchValue',this.value)
  // },
  methods: {
    onSearch(val) {
      Toast(val)
      localStorage.setItem('searchContent', this.value)
      let getValue = JSON.stringify(localStorage.getItem('searchContent'))
      let getParse = JSON.parse(getValue)
      this.historyValue.push(getParse)
      this.isShow = true
      
    },
     searchEvent(){
       this.$store.dispatch('hotKey/searchValue',this.value)
     },
    onCancel() {
      Toast('取消')
      this.$router.push('/search')
    },
    // 移除历史记录
    remove() {
      this.historyValue.length = 0
      this.isShow = false
    }
  },
  // 计算属性
  computed: {
    ...mapState('hotKey', ['keyValue'])
    //
  },
  // watch:{
  //   searchEvent(){
  //     this.$store.dispatch('hotKey/searchValue',this.value)
  //   }
  // }
}
</script>

<style lang="less" scoped>
.center {
  width: 100%;
  background-color: red;
  height: 4.3467rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .history {
    width: 94.5%;
    background-color: #333;
    height: 0.9rem;
    display: flex;
    justify-content: space-between;
    color: #999;
    line-height: 1.952rem;
    align-items: center;
    margin-bottom: 0;
  }

  .show {
    margin-top: 0px;
    width: 95%;
    height: 1.7448rem;
    background-color: green;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;

    a {
      height: 22px;
      font-size: 14px;
      padding: 1px 4px;
      font-family: PingFangSC-Light, helvetica, Heiti SC;
      text-decoration: none;
      padding: 0 0.15rem;
      margin-right: 0.32rem;
      margin-bottom: 0.32rem;
      border: 1px solid #999;
      border-radius: 4px;
      color: #333;
    }
  }
}

.hot {
  height: 0.9rem;
  font-size: 0.28rem;
  color: #999;
  display: flex;
  align-items: center;
  font-family: PingFangSC-Light, helvetica, Heiti SC;
  margin-left: 11px;
}

.tag {
  margin-right: -0.3rem;
  margin-bottom: -0.32rem;
  zoom: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 11px;
  flex-direction: row;
  a {
    display: flex;
    padding: 0 0.15rem;
    margin-right: 0.32rem;
    margin-bottom: 0.32rem;
    line-height: 0.46rem;
    border: 1px solid #999;
    border-radius: 4px;
    color: #333;
    font-size: 0.24rem;
  }
}
</style>
